<template>
  <view style="width: 100%;">
    <view style="width: 100%; padding: 0 20upx; margin-bottom: 18upx;">
      <swiper class="round-dot" indicator-dots circular autoplay interval="5000" duration="500"
              style="height: 466upx; border-radius: 20upx;">
        <swiper-item v-for="(item,index) in swiper_data" :key="index" style="height: 466upx; border-radius: 20upx;" @click="handleToCourse(item.type, item.target, item.img_arr && item.img_arr[0], item.article)">
          <view class="swiper-item" style="height: 466upx; border-radius: 20upx;">
            <image style="width: 100%;height: 100%;" :src="item.img_arr[0]" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="content">
      <view class="content-title flex align-center justify-between">
        <view class="title-left flex align-center">
          <view class="left-icon"></view>
          <view class="left-text">热门课程</view>
        </view>
        <view @click="is_article_type =! is_article_type" class="title-right flex align-center"
              style="position: relative;">
          <view class="right-text">{{article_type[article_type_index].name}}</view>
          <image class="right-img" :src="is_article_type?'/static/icon/icon_on@2x.png':'/static/icon/icon_down@2x.png'"
                 mode=""></image>
          <view v-if="is_article_type" class="all-type">
            <view :style="index == 1?'border-bottom: 1px solid rgba(0,0,0,0.05); border-top: 1px solid rgba(0,0,0,0.05);':''"
                  class="all-type-text text-center" @click.stop="handleChangeType(index, item.type)"
                  v-for="(item, index) in article_type" :key="index">{{ item.name }}
            </view>
          </view>
        </view>
      </view>
      <view v-if="article_list.length" @click="handleToArticle(item.id, index)"
            :class="index != article_list.length -1?'border-bottom-1':''" class="content-article flex"
            v-for="(item, index) in article_list" :key="index">
        <image class="article-img" :src="item.img_arr && item.img_arr[0]" mode="aspectFill"></image>
        <view class="article-right">
          <view class="article-right-title">{{ item.name }}</view>
          <view class="article-right-middle flex align-center" style="width: 100%;">
            <view class="middle-left flex align-center" style="width: 50%;">
              <image style="width: 25upx;height: 23upx;margin-left: 5upx;"
                     src="/static/icon/tutorials/gongkaobaike@2x.png" mode=""></image>
              <view style="margin-left: 5upx;">{{ item.video_tutorial_num }}</view>
            </view>
            <view class="middle-left flex align-center" style="width: 50%;">
              <image style="width: 25upx;height: 23upx;margin-left: 5upx;" src="/static/icon/tutorials/kecheng@2x.png"
                     mode=""></image>
              <text style="margin-left: 5upx;">{{ item.sale_num }}人在学</text>
            </view>
          </view>
          <view class="article-right-bottom flex align-center justify-between">
            <view style="font-size: 30upx;color: rgba(229,39,24,1);">￥{{ item.sale_price }}</view>
            <view class="flex align-center">
              <image style="width: 44upx;height: 44upx;border-radius: 50%;" :src="item.admin && item.admin.avatar"  mode="aspectFill"></image>
              <text style="font-size: 22upx;color: rgba(153,153,153,1);margin-left: 10upx;">{{ item.admin && item.admin.nick_name }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="!article_list.length && show_flag" class="justify-center align-center"
            style="width: 100%; margin-top: 160upx; flex-direction: column; text-align: center;">
        <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
        <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
      </view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="article_list.length >=15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {course_getListByCon} from "api/tutorials/tutorials"
import {ad_getListByCon} from "api/index/index"

export default {
  data() {
    return {
      show_flag: false,
      is_tab: 0,
      is_load: true, //加载
      article_list: [], //课程列表
      swiper_data: [], //轮播数据
      article_type: [
        {
          name: '全部教程',
          type: '',
        },
        {
          name: '实践教程',
          type: 'chapter'
        },
        {
          name: '基础教程',
          type: 'single'
        }
      ], //教程类型
      article_type_index: 0, //教程类型标识
      is_article_type: false, //是否选中
      tutorials_type: '', //教程类型
      bottom_flag: true, //触底标识
      page: 1, //分页
    }
  },
  methods: {
    //初始化
    pageInit(type, page = 1, refresh) {
      this.page = page
      course_getListByCon({type, page}).then(res => {
        if(refresh){
          this.article_list = [];
        }
        let temp_data = res.data.data;
        if(temp_data.length == 0){
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item=>{
            this.article_list.push(item);
          })
        }
        this.show_flag = true;
      })
    },
    //去教程
    handleToCourse(type, course_id, img, article){
      if(type){
        if(article && course_id){
          this.$uniNavigateTo({
            url: '/pages/tutorials/articleDetail/articleDetail',
            query: {
              course_id
            }
          })
        }else {
          uni.showToast({
            title: '跳转页面不存在',
            icon: 'none'
          })
        }
      }else {
        let imgs_arr = [];
        this.swiper_data.forEach(item=>{
          imgs_arr.push(item.img_arr[0])
        })
        uni.previewImage({
          urls: imgs_arr,
          current: img
        });
      }
    },
    //获取轮播图数据
    getSwiperData(){
      ad_getListByCon({position: 1}).then(res=>{
        console.log(res)
        this.swiper_data = res.data && res.data.ads;
      })
    },
    /**
     * @name 跳转文章详情
     * @param {Object} index 索引值
     */
    handleToArticle(course_id) {
      this.$uniNavigateTo({
        url: '/pages/tutorials/articleDetail/articleDetail',
        query: {
          course_id
        }
      })
    },
    //文章类型选择
    handleChangeType(index, type) {
      this.article_type_index = index;
      this.tutorials_type = type;
      this.article_list = [];
      this.show_flag = false;
      this.pageInit(type);
      this.is_article_type = !this.is_article_type
    },
  },
  onLoad() {
    this.pageInit();
    this.getSwiperData();
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page+=1;
      this.pageInit(this.tutorials_type,this.page);
    } else {
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.show_flag = false;
    this.pageInit(this.tutorials_type, 1, 1);
    this.getSwiperData();
    this.bottom_flag = true;
    uni.stopPullDownRefresh();
  }
}
</script>

<style scoped lang="less">
/deep/ .cu-load.over::after {
  content: '到底了';
}

/deep/ .cu-load.over::before {
  content: '';
}
/deep/ .uni-swiper-wrapper {
  border-radius: 20upx;
}

/deep/ .uni-swiper-dots {
  left: 90% !important;
  width: auto;
}

/deep/ .uni-swiper-dot {
  width: 16upx !important;
  height: 16upx !important;
  background-color: white;
}

/deep/ .uni-swiper-dot-active {
  background-color: #E52718;
}

/deep/ .uni-swiper-dot-active::after {
  content: none !important;
  background-color: #E52718 !important;
}

.content {
  width: 100%;
  padding: 0 23upx 0 17upx;
}

.content-title {
  padding-left: 3upx;
}

.left-icon {
  width: 8upx;
  height: 28upx;
  background-color: rgba(229, 39, 24, 1);
  border-radius: 4upx;
}

.left-text {
  font-size: 32upx;
  margin-left: 14upx;
  font-weight: 700;
}

.right-text {
  padding: 10upx 0;
  font-size: 22upx;
  color: rgba(153, 153, 153, 1);
  margin-right: 10upx;
}

.right-img {
  width: 14upx;
  height: 8upx;
}

.content-article {
  //height: 258upx;
  margin-top: 30upx;
  border-radius: 10upx;
  padding: 0upx 0 30upx 0;
}

.border-bottom-1 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.article-img {
  margin-left: 3upx;
  width: 286upx;
  height: 198upx;
}

.article-right {
  flex: 1;
  margin-left: 18upx;
  padding-top: 18upx;
}

.article-right-title {
  width: 390upx;
  font-size: 30upx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-right-middle {
  width: 314upx;
  margin: 30upx 0;
}

.middle-left {
  font-size: 24upx;
  color: rgba(153, 153, 153, 1);
}

.article-right-bottom {
  padding-right: 18upx;
}

.all-type {
  width: 180upx;
  //height: 170upx;
  padding: 10upx 16upx;
  border-radius: 10upx;
  background-color: #FFFFFF;
  box-shadow: 0 6upx 24upx 0 rgba(199, 198, 198, 0.5);
  position: absolute;
  top: 58upx;
  right: 0;
  z-index: 10;
}

.all-type-text {
  padding: 30upx 0;
  font-size: 22upx;
  color: rgba(153, 153, 153, 1);
}
</style>
